<template>
  <div class="app-container">
    <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="150px"
             style="width: 100%; padding: 0 30px;">

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="单位名称" prop="name">
            <el-input v-model="temp.name" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="法人代表" prop="legalPerson">
            <el-input v-model="temp.legalPerson"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="登录账号" prop="account">
            <el-input v-model="temp.account"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密码" prop="password">
            <el-input v-model="temp.password"/>
          </el-form-item>
        </el-col>
        <!--            <el-col :span="12">-->
        <!--                <el-form-item label="社会信用统一代码证" prop="bizLicenseSignpic">-->
        <!--                  <el-input v-model="temp.bizLicenseSignpic" />-->
        <!--                </el-form-item>-->
        <!--            </el-col>-->

        <el-col :span="12">
          <el-form-item label="联系人" prop="linkman">
            <el-input v-model="temp.linkman"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="telephone">
            <el-input v-model="temp.telephone"/>
          </el-form-item>
        </el-col>

        <el-col :span="12">
        <!--<el-form-item label="上传社会信用统一代码证" prop="bizLicenseSignpic">
          <el-input v-model="temp.bizLicenseSignpic" type="hidden"/>
          <el-upload
            ref="licenseSignpicUpload"
            action="string"
            accept="image/*"
            :limit="imgLimit"
            :file-list="licenseSignpicImgs"
            :multiple="licenseSignpicIsMultiple"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemoveLicenseSignpic"
            :on-exceed="handLeExceed"
            :auto-upload="true"
            :before-upload="beforeUpload"
            :http-request="licenseSignpicUpload">
            <i class="el-icon-plus" style="line-height: 100px;width: 100px;height: 100px;"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>-->

        </el-col>
        <el-col :span="12">
          <el-form-item label="选择类别" prop="telephone">
            <el-cascader
              :options="options"
              :props="props"
              clearable></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="审核状态" prop="status">
            <select-option
              v-model="temp.status"
              :clearable=false
              prop-name="AuditStatus"
              :prop-ds-type=1
              prop-url="/citymh/enum/getData4AddBy"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import { createApi, updateApi, fetchList } from './api'
  // 导入多选项组件
  import SelectOption from '@/views/coding/components/SelectOption'

  export default {
    name: 'MhUnit-FormDetail',

    components: { SelectOption },

    props: {
      isModule: {
        type: Boolean,
        default: false
      },
      row: {}
    },

    data() {
      return {
        rules: {
          name: [{ required: true, message: 'required', trigger: 'blur' }],
          legalPerson: [{ required: true, message: 'required', trigger: 'blur' }],
          account: [{ required: true, message: 'required', trigger: 'blur' }],
          password: [{ required: true, message: 'required', trigger: 'blur' }],
          bizLicenseSignpic: [{ required: true, message: '请上传社会信用统一代码证', trigger: 'blur' }],
          status: [{ required: true, message: 'required', trigger: 'blur' }],
          linkman: [{ required: true, message: 'required', trigger: 'blur' }],
          telephone: [{ required: true, message: 'required', trigger: 'blur' }],
          phone: [{ required: true, message: 'required', trigger: 'blur' }],
          fax: [{ required: true, message: 'required', trigger: 'blur' }],
          email: [{ required: true, message: 'required', trigger: 'blur' }],
          deleteflag: [{ required: true, message: 'required', trigger: 'blur' }]
        },
        dialogVisible: false,
        dialogImageUrl: '',
        licenseSignpicImgs: [],
        licenseSignpicIsMultiple: false,
        licenseSignpicArr: [],
        imgLimit: 1,//上传文件个数限制
        temp: {},
        props: { multiple: true },



        options: [{
          value: 1,
          label: '施工监理',
          children: [{
            value: 2,
            label: '房屋建筑（0-500万）含500万'
          }, {
            value: 7,
            label: '房屋建筑（500-1000万）含1000万'
          }, {
            value: 12,
            label: '房屋建筑（1000-3000万）含3000万'
          }, {
            value: 12,
            label: '水利水电（0-500万）含500万'
          }, {
            value: 12,
            label: '水利水电（500-1000万）含1000万'
          }, {
            value: 12,
            label: '水利水电（1000-3000万）含3000万'
          }, {
            value: 12,
            label: '市政工程（0-500万）含500万'
          }, {
            value: 12,
            label: '市政工程（500-1000万）含1000万'
          }, {
            value: 12,
            label: '市政工程（1000-3000万）含3000万'
          }, {
            value: 12,
            label: '绿化工程（0-500万）含500万'
          }, {
            value: 12,
            label: '绿化工程（500-1000万）含1000万'
          }, {
            value: 12,
            label: '绿化工程（1000-3000万）含3000万'
          }, {
            value: 12,
            label: '供排水工程（0-500万）含500万'
          }, {
            value: 12,
            label: '供排水工程（500-1000万）含1000万'
          }, {
            value: 12,
            label: '供排水工程（1000-3000万）含3000万'
          }]
        },
          {
          value: 17,
          label: '财务监理',
          children: [{
            value: 18,
            label: '审价建安（200万元以下）'
          }, {
            value: 21,
            label: '投资监理建安（200-1000万元以下）'
          }]
        },
          {
            value: 17,
            label: '投资监理',
            children: [{
              value: 18,
              label: '政府投资（拆迁类）（1000-30000万元以下）'
            }]
          }]
      }
    },


    watch: {
      'row': {
        immediate: true, // vue首次赋值不触发watch的解决方法
        handler: function(nval) {
          if (this.isModule) {
            // this.temp = Object.assign({}, this.row) // copy obj
            if (this.isNull(nval)) {
              return
            }
            if (this.isNull(nval.id)) {
              return
            }
            this.getList(nval.id)
          }
        }
      }
    },

    methods: {
      getList(_id) {
        this.resetTemp()
        fetchList({ id: _id }).then(result => {
          if (!result.success) {
            this.notify(result)
            return
          }
          this.temp = result.map.rows[0]
        })
      },
      // 给外部调用，清空form
      resetTemp() {
        this.temp = {
          name: '',
          legalPerson: '',
          account: '',
          password: '',
          bizLicenseSignpic: '',
          status: '',
          linkman: '',
          telephone: '',
          phone: '',
          fax: '',
          email: '',
          deleteflag: '',
          id: undefined
        }
      },
      // 给外部调用，设置默认值，请根据实际情况修改id值
      defaultTemp() {
        this.temp = {
          status: 0, //设置默认值
          deleteflag: 0 //设置默认值
        }
      },
      // 树表： 拿当前节点ID作为父节点ID，建立树关系
      setParentNodeId(id) {
        // this.temp.mhUnitId = id
        this.temp.parentId = id
      },
      // 给外部调用，插入记录
      createData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            const param = Object.assign({}, this.temp)
            createApi(param).then((r) => {
              this.notify(r)
              if (r.success) {
                this.resetTemp()
                // 从父组件调用此方法，进行回调下
                if (this.isModule) {
                  this.$emit('createResult')
                }
              }
            })
          }
        })
      },
      // 给外部调用，修改记录
      updateData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            // columnsTag.column4Add
            const param = { id: this.temp.id }
            param.name = this.temp.name
            param.legalPerson = this.temp.legalPerson
            param.account = this.temp.account
            param.password = this.temp.password
            param.bizLicenseSignpic = this.temp.bizLicenseSignpic
            param.status = this.temp.status
            param.linkman = this.temp.linkman
            param.telephone = this.temp.telephone
            param.phone = this.temp.phone
            param.fax = this.temp.fax
            param.email = this.temp.email
            param.deleteflag = this.temp.deleteflag
            updateApi(param).then((r) => {
              this.notify(r)
              if (r.success) {
                this.resetTemp()
                // 从父组件调用此方法，进行回调下
                if (this.isModule) {
                  this.$emit('updateResult')
                }
              }
            })
          }
        })
      },
      handlePictureCardPreview(file) {//点击文件列表中已上传的文件时的钩子
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handLeExceed(files,fileList){//文件超出个数限制时的钩子
        this.$notify({title: '警告', type: 'warning', message: "当前只允许选择"+this.imgLimit+"张图片"});
        return false;
      },
      beforeUpload(file) {//上传文件之前的钩子
        //验证图片大小
        const isLt5M = file.size > 1024 * 1024 * 2//2M
        if (isLt5M) {
          this.$notify({ title: '警告', type: 'warning', message: '上传的图片大小不能超过2M' })
          return false
        }
      },licenseSignpicUpload(params) {//上传社会信用统一代码证
        let formData = new FormData();
        formData.append('file', params.file);
        uploadImg(formData).then(res => {
          if (res.success) {
            params.file.url = res.map.url;
            params.file.group = res.map.group;
            this.licenseSignpicImgs.push(params.file);
            this.licenseSignpicArr.push(res.map.group);
            this.temp.bizLicenseSignpic = JSON.stringify(this.licenseSignpicArr);
          }
        });
      },
      handleRemoveLicenseSignpic(file, fileList) {//删除指定社会信用统一代码证
        this.licenseSignpicImgs.length = 0;
        this.licenseSignpicArr.length = 0;
        this.temp.bizLicenseSignpic = '';
        fileList.forEach((item, index) => {
          // console.log(item.raw.url);
          this.licenseSignpicImgs.push(item);
          this.licenseSignpicArr.push(item.group);
        });
        this.temp.bizLicenseSignpic = JSON.stringify(this.licenseSignpicArr);
      },
      licenseSignpicClearFiles() {//清除全部社会信用统一代码证
        this.$refs.licenseSignpicUpload.clearFiles();
      },
      cacheDataEcho(obj) {
        //数据回显

        //社会信用统一代码证图片回显
        if (obj.bizLicenseSignpic != undefined && obj.bizLicenseSignpic != '') {
          JSON.parse(obj.bizLicenseSignpic).forEach((item, index) => {
            this.licenseSignpicImgs.push({url: this.fastDfsCallbackUri + item, group: item})
            this.licenseSignpicArr.push(item);
          });
          this.temp.bizLicenseSignpic = JSON.stringify(this.licenseSignpicArr);
        }
        //回显数据
        this.temp = obj;
      },
      // 给外部调用，清除校验
      clearValidate() {
        this.$refs['dataForm'].clearValidate()
      }
    }

  }
</script>
<style>

</style>
